<template>
  <div class="goods-info-container">
    <div class="desc">
      <span> {{goodsInfo.desc}}</span>
    </div>
    <div class="img-container" v-for="(item,index) of goodsInfo.detailImage" :key="index">
      <div>{{item.key}}</div>
      <div>
        <!--        这里不要用图片懒加载，因为最开始我要计算高度-->
        <van-image @load="loadImage" width="100%" :src="img" v-for="(img,i) of item.list" :key="i"/>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "DetailGoodInfo",
    props: {
      goodsInfo: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    methods: {
      loadImage() {
        // console.log("图片加载完");
        this.$emit("loadImage");
      }
    }
  }
</script>

<style scoped>
  .goods-info-container {
    padding: 0 18px;
    margin: 26px 0;
  }

  .desc {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 26px;


    position: relative;
  }


  .desc:before {
    content: "";
    position: absolute;
    left: 0;
    top: -16px;
    width: 35%;
    height: 1px;
    background-color: #000000;
  }

  span:before {
    content: "";
    position: absolute;
    left: 0;
    top: -22px;
    width: 6px;
    height: 6px;
    background-color: #000000;
  }

  .desc:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 35%;
    height: 1px;
    background-color: #000000;
  }

  span:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 6px;
    height: 6px;
    background-color: #000000;
  }

  .img-container {

  }

  .img-container div {
    color: black;
    margin-bottom: 10px;
  }


</style>
